


<template>
  <div class="main">
    <div class="lme" v-show="meneStatus">
      <el-input class="elIp" clearable v-model="filterMenu" placeholder="请输入内容"></el-input>
      <el-menu default-active="2" class="el-menu-vertical-demo">
        <el-menu-item v-for="(i,ii) in menuList" :key="ii" :index="i.distributorCode"
          @click="open(i)">
          <span slot="title">{{i.distributorName}}</span>
        </el-menu-item>
      </el-menu>
    </div>

    <div class="main-body">
      <top-bar @upRout="upRout" :distributorCode="distributorCode" :meneStatus="meneStatus"></top-bar>
      <div class="main-body-content" v-if="upRoutSt == 1">
        <div class="body flex-1">
          <div class="wrap">
            <div style="padding-right: 360px">
              <phone-ctn>
                <div class="edit">
                  <nav-bar v-bind="project.config.navigation" :disabled="true"></nav-bar>
                </div>
              </phone-ctn>
              <config-ctn title="商城导航">
                <config-wrap>
                  <div class="mb15 f13">导航</div>
                  <div class="nav">
                    <div class="mt10 mb15 f12 f-grey">可配置 1 至 4 个导航</div>
                    <div class="mt10 mb15 f12 f-red">主页导航不可配置</div>
                    <draggable v-model="navigation.list" :move="onMove">
                      <div class="nav-item" v-for="(item, index) in navigation.list" :key="item.id">
                        <div v-if="index!=0 && navigation.list.length > 2" class="nav-delete"
                          @click="navigation.list.splice(index, 1)">
                          <i class="f12 ivu-icon ivu-icon-md-close"></i>
                        </div>
                        <config-item label="菜单图标" class="flex f13">
                          <div style="display:flex;">
                            <!-- 灰色 -->
                            <icon-select v-model="item.icon2" :outIcon="item.outIcon"></icon-select>
                            <!-- 高亮 -->
                            <icon-select v-model="item.icon" :outIcon="item.outIcon"></icon-select>
                          </div>
                        </config-item>
                        <config-item label="菜单名称">
                          <el-input v-model="item.text" size="small" maxlength="4"
                            show-word-limit :readonly="index==0"></el-input>
                        </config-item>
                        <config-item label="跳转页面" v-if="index!=0">
                          <!-- <jump-select v-model="item.jump"></jump-select> -->
                          <SchemaJump :value="item.jump"></SchemaJump>
                        </config-item>
                        <config-item label="是否突出" v-if="index!=0">
                          <el-switch v-model="item.outIcon"></el-switch>
                        </config-item>
                      </div>
                    </draggable>
                    <div v-if="navigation.list.length < 5" class="nav-add" @click="add">
                      新增导航
                    </div>
                  </div>
                </config-wrap>
              </config-ctn>
            </div>
          </div>
        </div>
      </div>
      <MallPagesManage @upRout="upRout" v-else-if="upRoutSt == 2" />
      <Control v-else-if="upRoutSt == 3" />
    </div>
    <VolBox :lazy="true" :model.sync="model" title="添加小程序信息" :height="350" :width="500"
      :padding="15" :show="false" ref="mychid">
      <div>
        <VolForm ref="myform" :label-width="120" :loadKey="true" :formFields="editFormFields"
          :formRules="editFormOptions">
        </VolForm>
      </div>
      <div slot="footer">
        <Button type="default" @click="model = false">关闭</Button>
        <Button type="default" @click="onsure">确认</Button>
      </div>
    </VolBox>
  </div>

</template>
<script>
import NavBar from "@/components/NavBar";
import IconSelect from "@/components/IconSelect";
import TopBar from "@/components/TopBar";
import VolBox from "@/components/basic/VolBox.vue";
import VolForm from "@/components/basic/VolForm.vue";
import MallPagesManage from "@/pages/MallPagesManage.vue";
import Control from "@/components/Control";
export default {
  name: "mall_store",
  components: {
    NavBar,
    IconSelect,
    TopBar,
    VolBox,
    VolForm,
    MallPagesManage,
    Control,
  },
  data() {
    return {
      model: false,
      ismodel: false,
      project: { config: { navigation: { list: [] } } },
      distributorCode: "",
      editFormFields: {
        logo: "",
        name: "",
        industry: "",
        pages: "",
        config: "",
        creator: "",
        createID: "",
        createDate: "",
        modifier: "",
        modifyID: "",
        modifyDate: "",
        supplierCode: "",
      },
      editFormOptions: [
        [
          {
            title: "Logo",
            field: "logo",
            type: "img",
            url: "/api/Stores/Upload",
            required: true,
          },
        ],
        [{ title: "小程序名称", field: "name", type: "text", required: true }],
        [
          {
            dataKey: "mallIndustry",
            data: [],
            title: "行业",
            field: "industry",
            type: "select",
            required: true,
          },
        ],
      ],
      menuList: [],
      filterMenu: "",
      upRoutSt: 1,
      meneStatus: true
    };
  },
  computed: {
    navigation() {
      return this.project.config.navigation;
    },
  },
  watch: {
    project: {
      handler(newval, oldval) {
        this.$store.getters.data().project = newval;
      },
      deep: true,
    },
    filterMenu(newval, oldval) {
      if (newval != "") {
        this.menuList = this.menuList2.filter((i, ii, iii) => {
          return i.distributorName.includes(newval);
        });
      } else {
        this.menuList = this.menuList2;
      }
    },
  },
  created() {
    if (this.$route.query.model == 1) {
      let xcxModel = JSON.parse(sessionStorage.getItem('xcxModel'))
      this.project = xcxModel
      this.project.config = xcxModel.config
      this.project.pages = xcxModel.pages
      this.upRoutSt = 3;
    }
    this.getMenu();
  },
  methods: {
    onMove(e){
      if (e.draggedContext.index == 0) return false;
      if (e.relatedContext.index == 0) return false;
      return true;
    },
    getMenu() {
      let params = {
        page: 1,
        rows: 1000,
        sort: "createDate",
        order: "desc",
        wheres: '[{"name":"distributorType","value":"2006,2004","displayType":"checkbox"}]',
      };
      this.http.post("api/DistributorNews/getPageData", params, false)
        .then((reslut) => {
          this.menuList = reslut.rows;
          this.menuList2 = reslut.rows;
        });
    },
    open(c) {
      this.upRoutSt = 1;
      this.distributorCode = c.distributorCode
      sessionStorage.setItem("distributorId",  c.distributorCode)
      let params = {
        page: 1,
        rows: 30,
        sort: "createDate",
        order: "desc",
        wheres: '[{"name":"supplierCode","value":"' + c.distributorCode + '","displayType":"Equal"}]',
      };
      this.http.post("api/Stores/getPageData", params, false).then((reslut) => {
        if (reslut.rows.length == 0) {
          this.model = true;
          this.$store.getters.data().project = null;
        } else {
          this.project = JSON.parse(JSON.stringify(reslut.rows[0]));
          // this.project.config = JSON.parse(reslut.rows[0].config);
          this.$set( this.project,'config',JSON.parse(reslut.rows[0].config))
          // this.project.pages = JSON.parse(reslut.rows[0].pages);
          this.$set( this.project,'pages',JSON.parse(reslut.rows[0].pages))
          this.project.pages.forEach(v => {
            if(v.componentList && v.componentList.length){
              v.componentList.forEach((jj)=>{
                if(jj.name == '图文导航'&&!jj.attrs.textAlign){
                  jj.attrs.textAlign = 'center'
                }
              })
            }
          });
          localStorage.setItem('mallDataList',JSON.stringify(this.project.pages))
        }
      });
      
      let params2 = {
        page: 1,
        rows: 1000,
        sort: "createDate",
        order: "desc",
        wheres: '[]',
      };
      this.http.post("api/Texts/getPageData", params2, false).then((reslut) => {
        localStorage.setItem('TextsDataList',JSON.stringify(reslut.rows))
      })
    },
    add() {
      let ji = "{\"data\":{\"logo\":\"https://oss.i-town.cn/itown/202407171033116026950.png\",\"name\":\"CSCNJK\",\"industry\":\"digital\",\"pages\":[{\"id\":\"000000\",\"name\":\"首页\",\"home\":true,\"backgroundUrl\":[],\"backgroundColor\":\"\",\"componentList\":[{\"component\":\"McSwiper\",\"name\":\"广告轮播\",\"icon\":\"ivu-icon-md-swap\",\"list\":[{\"id\":\"0001\",\"image\":\"https://oss.i-town.cn/itown/202311221058175012990.jpg\"},{\"id\":\"0002\",\"image\":\"https://oss.i-town.cn/itown/202311221058336102360.jpg\"},{\"id\":\"0003\",\"image\":\"https://oss.i-town.cn/itown/202311221058529104360.jpg\"}],\"attrs\":{\"model\":\"basis\",\"autoplay\":true,\"loop\":true},\"styles\":{\"pagePadding\":0,\"negativeMarginBottom\":0},\"id\":\"1651050315JEeHVc\"}]}],\"config\":{\"navigation\":{\"label\":\"导航\",\"styles\":{\"background\":\"#fff\"},\"list\":[{\"id\":\"00001\",\"icon\":\"https://oss.i-town.cn/itown/202407170927319584730.png\",\"icon2\":\"https://oss.i-town.cn/itown/202407170927086389360.png\",\"text\":\"首页\",\"outIcon\":false,\"jump\":{\"type\":\"custom\",\"id\":\"000000\"}},{\"id\":\"00003\",\"icon\":\"https://oss.i-town.cn/itown/202407170927039168080.png\",\"icon2\":\"https://oss.i-town.cn/itown/202407170927007399730.png\",\"text\":\"分类\",\"outIcon\":false,\"jump\":{\"type\":\"\",\"id\":\"\"}},{\"id\":\"00004\",\"icon\":\"https://oss.i-town.cn/itown/202407170926513160450.png\",\"icon2\":\"https://oss.i-town.cn/itown/202407170926477113540.png\",\"text\":\"购物车\",\"outIcon\":false,\"jump\":{\"type\":\"\",\"id\":\"\"}},{\"id\":\"00005\",\"icon\":\"https://oss.i-town.cn/itown/202407170927380538300.png\",\"icon2\":\"https://oss.i-town.cn/itown/202407170927352401300.png\",\"text\":\"我的\",\"outIcon\":false,\"jump\":{\"type\":\"\",\"id\":\"\"}}]},\"backgroundColor\":\"#FFFFFF\"},\"creator\":\"宋焕杰01\",\"createID\":3673,\"createDate\":\"2024-07-17 10:33:21\",\"modifier\":\"\",\"modifyID\":\"\",\"modifyDate\":\"\",\"supplierCode\":\"HJHJ\",\"id\":\"d25c99f0-7345-451c-9170-e0ee61968cf1\"}}"
      this.navigation.list.push({
        id: this.$getRandomCode(5),
        icon: "",
        icon2: "",
        text: "",
        outIcon:false,
        jump: {
          type: "",
          id: "",
        },
      });
    },
    onsure() {
      this.$refs.myform.validate(() => {
        this.editFormFields.supplierCode = this.distributorCode;
        let config = {
          navigation: {
            label: "导航",
            styles: {
              background: "#fff",
            },
            list: [
              {
                id: "00001",
                icon: "https://oss.i-town.cn/itown/202407170927319584730.png",
                icon2: "https://oss.i-town.cn/itown/202407170927086389360.png",
                text: "首页",
                outIcon:false,
                jump: {
                  type: "custom",
                  id: "000000",
                },
              },
              {
                id: "00003",
                icon: "https://oss.i-town.cn/itown/202407170927039168080.png",
                icon2: "https://oss.i-town.cn/itown/202407170927007399730.png",
                text: "分类",
                outIcon:false,
                jump: {
                  type: "",
                  id: "",
                },
              },
              {
                id: "00004",
                icon: "https://oss.i-town.cn/itown/202407170926513160450.png",
                icon2: "https://oss.i-town.cn/itown/202407170926477113540.png",
                text: "购物车",
                outIcon:false,
                jump: {
                  type: "",
                  id: "",
                },
              },
              {
                id: "00005",
                icon: "https://oss.i-town.cn/itown/202407170927380538300.png",
                icon2: "https://oss.i-town.cn/itown/202407170927352401300.png",
                text: "我的",
                outIcon:false,
                jump: {
                  type: "",
                  id: "",
                },
              },
            ],
          },
          backgroundColor: "#FFFFFF",
        };
        let pages = [
          {
            id: "000000",
            name: "首页",
            home: true,
            backgroundUrl: [],
            backgroundColor: "",
            componentList: [
              {
                component: "McSwiper",
                name: "广告轮播",
                icon: "ivu-icon-md-swap",
                list: [
                  {
                    id: "0001",
                    image:
                      "https://oss.i-town.cn/itown/202311221058175012990.jpg",
                  },
                  {
                    id: "0002",
                    image:
                      "https://oss.i-town.cn/itown/202311221058336102360.jpg",
                  },
                  {
                    id: "0003",
                    image:
                      "https://oss.i-town.cn/itown/202311221058529104360.jpg",
                  },
                ],
                attrs: {
                  model: "basis",
                  autoplay: true,
                  loop: true,
                },
                styles: {
                  pagePadding: 0,
                  negativeMarginBottom: 0,
                },
                id: "1651050315JEeHVc",
              },
            ],
          },
        ];
        this.editFormFields.config = config;
        this.editFormFields.pages = pages;
        const params = JSON.parse(JSON.stringify(this.editFormFields));
        params.logo = params.logo.length ? params.logo[0].path : "";
        this.http
          .post("api/Stores/add", { mainData: params }, false)
          .then((reslut) => {});
        this.model = false;
      });
    },
    upRout(v) {
      this.upRoutSt = v;
    },
  },
};
</script>
<style lang="scss" scoped>
@import url("../assets/style.css");
.edit {
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 603px /*no*/;
  background: #f7f8fa;
}
.main {
  display: flex;
  height: 100%; /*no*/
  background: #f7f8fa;
  .lme {
    width: 180px;
    .elIp {
      width: 90%;
      margin: 10px 8px;
    }
  }
  .el-menu {
    height: calc(100% - 40px);
    overflow-y: auto;

    .el-menu-item {
      height: 31px;
      line-height: 32px;
    }
  }

  .main-body {
    flex: 1;

    .main-body-content {
      position: relative;
      height: calc(100% - 60px); /*no*/
      margin-top: 4px;
      overflow: hidden;

    }
  }
}
.nav-item{
  >div{
    align-items: center;
  }
}
</style>
